<template>
     <div class="operateLog">
        <div class="title_bt">
            <div class="bt" @click="search_show=!search_show">筛选 <i :class="search_show?'el-icon-caret-top':'el-icon-caret-bottom' "></i> </div>
             <div class="search" v-show="selectvalue!='' && selectvalue !='全部'">
                <el-input v-model="searchinput" placeholder="请输入搜索的内容"></el-input>
                <div class="button"><i class="el-icon-search"></i></div>
             </div>
        </div>
        <div class="search_show" v-show="search_show">
            <el-row :gutter="40" >
                <el-col :sm="10" :md="8" :lg="5" class="card">
                    <div class="bt">操作对象：</div>
                    <div class="cardflex1">
                        <el-select v-model="selectvalue" placeholder="操作对象">
                            <el-option
                                v-for="item in select" 
                                :key="item.value"  
                                :label="item.label" 
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :sm="10" :md="8" :lg="8" class="card">
                    <div class="bt">日期范围：</div>
                    <div class="cardflex1">
                        <el-date-picker
                            v-model="timevalue"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>
                </el-col>
                  <el-col :sm="4" :md="8" :lg="3" class="card">
                    <el-button type="primary" @click="search">确定</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="tableData" style="width: 100%" class="tablebox">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="zt" label="操作类型" width="100"></el-table-column>
            <el-table-column prop="type" label="广告" width="100"></el-table-column>
            <el-table-column prop="object" label="操作对象"></el-table-column>
            <el-table-column   label="操作行为">
               <template slot-scope="scope">
                    <p class="p"><span>状态</span>为<span>{{scope.row.template[0].zt_}}</span></p>
                    <p class="p"><span>广告名称</span>为<span>{{ scope.row.template[1].name}}</span></p>
                    <p class="p"><span>计费方式</span>为<span>{{ scope.row.template[2].ad_name}}</span></p>
                    <p class="p"><span>广告代码位</span>为<a :href="scope.row.template[3].ad_link" target="_blank">查看详情</a></p>
                    <p class="p"><span>投放开始时间</span>为<span>{{ scope.row.template[4].time_s}}</span></p>
                    <p class="p"><span>投放结束时间</span>为<span>{{ scope.row.template[5].time_d}}</span></p>
                    <p class="p"><span>优先级</span>为<span>{{ scope.row.template[6].vip}}</span></p>
                    <p class="p"><span>权重</span>为<span>{{ scope.row.template[7].vip2}}</span></p>
                    <p class="p"><span>物料</span>为<a :href="scope.row.template[8].ad_link2" target="_blank">查看详情</a></p>
                </template>
            </el-table-column>
            <el-table-column prop="email" width="210" label="操作人"></el-table-column>
            <el-table-column prop="ip" width="130" label="操作IP地址"></el-table-column>
        </el-table>
        <el-pagination
            class="pageswarp"
            :background="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=pages
            :page-size="20"
            layout="total, prev, pager, next, jumper"
            :total="400">
        </el-pagination>


     </div>
</template>
<script>
export default {
    name:'operateLog',
    data(){
        return{
            pages:1,
           searchinput:'',  //顶部的搜索栏目
           search_show:false,  //显示搜索盒子
           selectvalue:'',     //搜索下拉框
           select:[
               {value:"全部",lable:"type1"},
               {value:"代码位",lable:"type2"},
               {value:"账号",lable:"type3"},
               {value:"客户",lable:"type4"},
               {value:"资料",lable:"type5"},
               {value:"物料",lable:"type6"},
               {value:"广告",lable:"type7"},
               {value:"财务",lable:"type8"},
               {value:"屏蔽规则",lable:"type9"},
               {value:"自定义定向",lable:"type10"},
               {value:"代码位分组",lable:"type11"},
               {value:"富媒体物料模板",lable:"type12"},
               {value:"积分兑换",lable:"type13"}
           ],
           timevalue:'',   //搜索时间
           pickerOptions: {   //搜索时间变量
                shortcuts: [
                    {
                        text: '昨天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                   }, 
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                   }, 
                    {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, 
                    {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
           },
           tableData: [   //表格的数据
            {
                date: '2024-01-20 17:13:51',
                zt: '新建',
                type: '广告',
                object: '（品牌）地平线 首页通栏一24年1月21日',
                email: 'qiubai8030140-liqinglian',
                template:[
                    {zt_:'就绪'},
                    {name:'（品牌）地平线 首页通栏一24年1月21日'},
                    {ad_name:'CPM'},
                    {ad_link:'https://www.3dmgame.com'},
                    {time_s:'2024-01-21 10:00:00'},
                    {time_d:'2024-01-21 11:00:00'},
                    {vip:'7'},
                    {vip2:'5'},
                    {ad_link2:'https://www.baidu.com'},

                ],
                ip: '114.86.116.213'
            },
              {
                date: '2024-01-20 17:13:51',
                zt: '新建',
                type: '广告',
                object: '（品牌）地平线 首页通栏一24年1月21日',
                email: 'qiubai8030140-liqinglian',
                template:[
                    {zt_:'就绪'},
                    {name:'（品牌）地平线 首页通栏一24年1月21日'},
                    {ad_name:'CPM'},
                    {ad_link:'https://www.3dmgame.com'},
                    {time_s:'2024-01-21 10:00:00'},
                    {time_d:'2024-01-21 11:00:00'},
                    {vip:'7'},
                    {vip2:'5'},
                    {ad_link2:'https://www.baidu.com'},

                ],
                ip: '114.86.116.213'
            },
              {
                date: '2024-01-20 17:13:51',
                zt: '新建',
                type: '广告',
                object: '（品牌）地平线 首页通栏一24年1月21日',
                email: 'qiubai8030140-liqinglian',
                template:[
                    {zt_:'就绪'},
                    {name:'（品牌）地平线 首页通栏一24年1月21日'},
                    {ad_name:'CPM'},
                    {ad_link:'https://www.3dmgame.com'},
                    {time_s:'2024-01-21 10:00:00'},
                    {time_d:'2024-01-21 11:00:00'},
                    {vip:'7'},
                    {vip2:'5'},
                    {ad_link2:'https://www.baidu.com'},

                ],
                ip: '114.86.116.213'
            },
              {
                date: '2024-01-20 17:13:51',
                zt: '新建',
                type: '广告',
                object: '（品牌）地平线 首页通栏一24年1月21日',
                email: 'qiubai8030140-liqinglian',
                template:[
                    {zt_:'就绪'},
                    {name:'（品牌）地平线 首页通栏一24年1月21日'},
                    {ad_name:'CPM'},
                    {ad_link:'https://www.3dmgame.com'},
                    {time_s:'2024-01-21 10:00:00'},
                    {time_d:'2024-01-21 11:00:00'},
                    {vip:'7'},
                    {vip2:'5'},
                    {ad_link2:'https://www.baidu.com'},

                ],
                ip: '114.86.116.213'
            },
          ]
        }
    },
    methods:{
        search(){
            console.log(this.selectvalue,this.timevalue)
        },
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }

    }
}
</script>